<template>
  <div class="full-page">
    <van-nav-bar title="系统权限" left-arrow @click-left="onClickLeft" fixed />
    <div class="con">
      <div
        class="box van-hairline--bottom"
        v-for="item in list"
        :key="item.title"
      >
        <p>{{ item.title }}</p>
        <van-switch
          v-model="item.checked"
          active-color="#44d488"
          inactive-color="#cccccc"
        />
      </div>
    </div>
  </div>
</template>
        
<script>
import { NavBar, Switch } from "vant";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Switch.name]: Switch,
  },
  data() {
    return {
      list: [
        {
          title: "系统推送通知",
          checked: false,
        },
        {
          title: "不把我推荐给微信好友",
          checked: false,
        },
        {
          title: "开启个性化推荐",
          checked: false,
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
  },
};
</script>
        
    <style scoped lang="scss">
.full-page {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  .con {
    height: calc(100% - 50px);
    overflow: auto;
    padding-bottom: 21.3333vw;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      display: none;
    }
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4vw;
    }
  }
}
</style>